<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/common.css">
<link rel="stylesheet" href="stylesheets/balanceQuery.css">
</head>

<body>

	<div id="mainCharts" style="height: 300px;"></div>
	<p id="intro" class="intro">
		<span class="span-left">单位：/万元</span><span id="balanceTotal"
			class="span-right">合计：</span>
	</p>
	<ul id="balanceDetail" class="balanceDetail"></ul>

	<div id="modalDialog" style="display: none" class="modalDialog">
		<p class="dialogTitle" id="bname"></p>
		<div id="alertDetailPanel" class="alertDetailPanel">
			<ul>
				<li>所占比例：<span id="percent"></span></li>
				<li>计数单位：<span>万/元</span></li>
				<li>金额合计：<span id="momey"></span></li>
			</ul>
			<ul id="datalist">

			</ul>
		</div>
		<div class="dialogFooter">
			<div class="dialogOk" id="dialogOk"
				style="-webkit-tap-highlight-color: transparent;">确 认</div>
		</div>
	</div>
	<script type="text/javascript" src="javascripts/echarts.min.js"></script>
	<script>
var app;
var deviceone;
var nf;
var config;
var cache;
         
window.onDeviceOneLoaded = function() {	
	nf = sm("do_Notification");
	app = sm("do_App");
	var page = sm("do_Page");
    deviceone = require("deviceone");
    config = require("config");
    cache=sm("do_DataCache");
    var do_ALayout_root=ui("do_ALayout_root");
    var userinfo=cache.loadData("userinfo");

    var chartdata=JSON.parse(do_ALayout_root.tag);    
	document.getElementById('balanceTotal').innerHTML="合计：￥"+parseFloat(chartdata.totalnum).toFixed(2);
	var balanceList=chartdata.typenum;
       for(var i=0;i<balanceList.length;i++){
       	if(balanceList[i].value=='NaN' || balanceList[i].value==null ){
       		balanceList[i].value=0;
		}					
       	var datavalue=Number(balanceList[i].sumnum).toFixed(2);

       	balanceList[i].value = datavalue;
       	balanceList[i].name = balanceList[i].businesstype;
       	
       }
	option(balanceList);
    
    function option(balanceList){
    	
        	var CanvasHeight = 360 + balanceList.length * 33;
            document.getElementById('mainCharts').style.height=CanvasHeight;
            var myChart = echarts.init(document.getElementById('mainCharts'));
            var option = {
                legend: {
                    orient: 'vertical',
                    top: 360,
                    width: '20%',
                    itemGap: 15,
                    padding: 10,
                    itemWidth: 18,
                    itemHeight: 18,
                    selectedMode: false,
                    textStyle: {
                        fontSize: 14
                    },
                    data: balanceList
                },
                series: [
                    {
                        name: '分类',
                        type: 'pie',
                        radius: ['35', '145'],
                        center: ['50%', '155'],
                        avoidLabelOverlap: true,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'inner',
                                    formatter: function (params) {                                          
                                    	balanceList.forEach(function(ele,i){
                                    		
                                    		if(params.data.id==balanceList[i].id) 
                                    			balanceList[i].percent=(params.percent - 0).toFixed(0) + '%';
                                    
                            			});
                                    	return (params.percent - 0).toFixed(0) + '%'
                                    }
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        data: balanceList
                    }
                ],
                animation: false
            };
        		myChart.setOption(option);
        		
        		
        		var liLIst='';
                for(var i=0;i<balanceList.length;i++){
                	liLIst+='<li  data-id="'+balanceList[i].id+'" data-momey="'+balanceList[i].value+'" data-percent="'+balanceList[i].percent+'" data-bname="'+balanceList[i].name+'">'+balanceList[i].value+'</li>';
                }
                document.getElementById("balanceDetail").innerHTML=liLIst;
                myChart.on('click', alertDetail);
                var obj_lis = document.getElementById("balanceDetail").getElementsByTagName("li");
                for(i=0;i<obj_lis.length;i++){
                 obj_lis[i].onclick = alertDetail;
                }
               
        	};
        	function alertDetail(param) {
        		
				var _id;
				var _value;
				var _percent;
				var _bname;
				if(param.data){
				    _bname=param.data.name;
				}else {
				   _bname=this.getAttribute('data-bname');
				}
				
				app.openPage({
					source:"source://view/money/balanceSeach.ui",
					animationType:'slide_r2l',
					data:JSON.stringify({type:_bname})
					});
        	}
        	
};
</script>
</body>

</html>
